<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="_adminfragment::head(~{::title},~{})">
    <meta charset="utf-8">
    <title>上架新书</title>
    <link rel="stylesheet" type="text/css" href="../../static/lib/layui/css/layui.css"/>
    <script src="../../static/lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div th:replace="_adminfragment::header"></div>
    <div th:replace="_adminfragment::side('addBook')"></div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 20px;">
            <form action="" class="layui-form" lay-filter="addBook" style="margin-right:30px;margin-top: 20px;">
                <div class="layui-form-item">
                    <label class="layui-form-label">分类</label>
                    <div class="layui-input-block">
                        <select name="categoryCode" id="categoryCode">
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">书名</label>
                    <div class="layui-input-block">
                        <input type="text" id="bookName" name="bookName" required lay-verify="required"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">书籍描述</label>
                    <div class="layui-input-block">
                        <textarea name="description" placeholder="书籍简要描述" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">ISBN</label>
                    <div class="layui-input-block">
                        <input type="text" id="isbn" name="isbn" required lay-verify="required" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">出版社</label>
                    <div class="layui-input-block">
                        <input type="text" id="press" name="press" required lay-verify="required" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">作者</label>
                    <div class="layui-input-block">
                        <input type="text" id="author" name="author" required lay-verify="required" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">出版日期</label>
                    <div class="layui-input-block">
                        <input type="text" id="pubDate" name="pubDate" required lay-verify="required"
                               placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">价格</label>
                    <div class="layui-input-block">
                        <input type="number" min="0" id="price" name="price" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">库存</label>
                    <div class="layui-input-block">
                        <input type="number" min="0" id="stock" name="stock" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">上传图片</label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" id="upload-book-image">
                            <i class="layui-icon">&#xe67c;</i>上传图片
                        </button>
                        <input type="text" id="image" name="image" autocomplete="off" class="layui-input" style="display: none;">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="addBookBtn">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>

        </div>
    </div>

    <div th:replace="_adminfragment::footer"></div>
</div>
</body>
<script type="text/javascript">
    layui.use(['table', 'form', 'jquery', 'layer', 'upload','element'], function () {
        var table = layui.table,
            $ = layui.jquery,
            layer = layui.layer,
            upload = layui.upload,
            element = layui.element,
            form = layui.form;

        //上传图片
        var uploadInst = upload.render({
            elem: '#upload-book-image',//绑定元素
            url: '/upload/book_image',//上传接口
            accept: 'images',//只允许上传图片
            acceptMime: 'image/*',//只筛选图片
            size: 1024*2 , //限定大小
            field:'bookImage',
            done: function (res) {
                //上传完毕回调
                if(res.code!=0){
                    return layer.msg(res.msg,{icon:2});
                }
                $("#image").val(res.data);
                return layer.msg("上传成功",{icon:1});
            },
            error: function () {
                //请求异常回调
            }
        });

        $.getJSON("/category/searchall", function (res) {
            if (res.code != 0) {
                return;
            }
            $.each(res.data, function (index, item) {
                $("#categoryCode").append('<option value="' + item.categoryCode + '">' + item.categoryName +
                    '</option> ');
            });
            form.render();
        });

        //提交
        form.on('submit(addBookBtn)', function (data) {
            var data = form.val('addBook');
            $.post('/book/insert',data, function (res) {
                if (res.code != 0) {
                    return layer.msg(res.msg, {icon: 2});
                }
                return layer.msg("添加成功", {icon: 1});
            });
            return false;
        });
    });
</script>
</html>
